<script setup>
import { useRoute } from "vue-router"
import "../assets/date"
import axios from "axios"
import { onMounted, ref } from "vue"
let route = useRoute()
let id = route.params.id;
let cw = ref([])
onMounted(() => {
  axios.post("/api/goods", { id: id }).then(res => {
    cw.value = res.data.data
  })
})
let tat = ref("")
// onMounted(() => {
//   axios.get("api/fengleiye").then(res => {
//     console.log(res)
//     tat.value = res.data.data
//   })
// })
</script>

<template>
  <div class="box">
    <div class="title">
      校园易购
    </div>
    <ul class="nav">
      <li>打折</li>
      <li>宵夜</li>
      <li>零食</li>
      <li>水果</li>
    </ul>
    <div class="da">
      <div class="linqi" v-for="item in cw">
        <img :src="item.img" alt="">
        <div class="jiage">
          <span>{{ item.title }}</span>
          <span>价格：{{ item.jiage }}</span>
          <span>原价:{{ item.yuanjia }}</span>
        </div>
      </div>
    </div>
    <el-col class="yc">
      <RouterLink to="/" class="wz">首页</RouterLink>
      <RouterLink to="/Gouwuche" class="wz">购物车</RouterLink>
      <RouterLink to="/Home" class="wz">我的</RouterLink>
    </el-col>
  </div>
</template>
<style scoped>
.box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 375px;
  margin: 0 auto;
  border: 1px solid #ccc;
}

.title {
  height: 25px;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
}

.nav {
  list-style: none;
  display: flex;
  justify-content: space-around;
  padding-right: 35px;
}

.linqi img {
  width: 170px;
  height: 200px;
}

.da {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: calc(50%-5px);
  background-color: #eeeded;
}

.linqi {
  width: 45%;
  display: flex;
  flex-direction: column;
}

.ac img {
  width: 30px;
  height: 30px;
  border-radius: 999px;
}

.ac {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.jiage span:nth-of-type(1) {
  font-size: 16px;
  padding-right: 80px;
}

.jiage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.jiage span:nth-of-type(2) {
  color: red;
  padding-right: 110px;
  font-size: 12px;
}

.jiage span:nth-of-type(3) {
  color: #ccc;
  font-size: 12px;
  padding-right: 40px;
}

.yc {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #ccc;
  font-size: 20px;
}
.wz {
  color: black;
  text-align: center;
  text-decoration: none;
}
</style>